<script setup lang="ts">
const emits = defineEmits(['navClick','productClick'])
const sticky = ref(false)
const navList = reactive([
  {
    name: '首页',
    href: 'home',
    id: 1,
    open: false,
  },
  {
    name: '关于我们',
    href: 'about',
    id: 2,
    open: false,
  },
  {
    name: '荣誉介绍',
    href: 'honor',
    id: 3,
    open: false,
  },
  {
    name: '产品介绍',
    href: 'product',
    id: 4,
    open: false,
    children: [
      {
        name: '航天航空用自卷式开口保护套',
        id: 1,
      },
      {
        name: '航天航空用自卷式开口屏蔽保护套',
        id: 2,
      },
      {
        name: '航天航空用耐高温可扩张型保护套',
        id: 3,
      },
      {
        name: '航空用高性能纤维编织绑扎带',
        id: 4,
      },
      {
        name: '航天航空用自卷式开口防火保护套',
        id: 5,
      },
      {
        name: '航天航空用-55～70',
        id: 6,
      },
    ],
  },
])

onMounted(() => {
  window.addEventListener('scroll', () => {
    sticky.value = window.scrollY > 0
  })
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})

function handleClickOutside(event: MouseEvent) {
  const dropdownElement = document.getElementById('dropdownNavbar')
  if (dropdownElement && !dropdownElement.contains(event.target)) {
    navList.forEach((item) => {
      item.open = false
    })
  }
}
function handleNavClick(href: string) {
  emits('navClick', href)
}

function handleProductClick(id: number) {
  emits('productClick', id)
}

function handleToggleDropdown(item: any) {
  item.open = !item.open
}
</script>

<template>
  <nav class="h-[75px] border-gray-200 bg-white transition-all md:block dark:bg-gray-900" :class="sticky ? 'fixed z-999 w-full shadow' : ''">
    <div class="mx-auto max-w-screen-2xl flex flex-wrap items-center justify-between p-5">
      <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse">
        <img src="@/assets/img/logo.png" alt="Logo">
      </a>
      <div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
        <div class="link hidden text-[var(--primary-color)] md:flex">
          <img src="@/assets/img/icon／电话@2x.png" alt="Phone" class="mr-3 h-5 w-5">
          0553-8313488
        </div>
        <!--        <button data-collapse-toggle="navbar-cta" type="button" class="hidden h-10 w-10 inline-flex items-center justify-center rounded-lg p-2 text-sm text-gray-500 md:hidden hover:bg-gray-100 dark:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-cta" aria-expanded="false"> -->
        <!--          <span class="sr-only">Open main menu</span> -->
        <!--          <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14"> -->
        <!--            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" /> -->
        <!--          </svg> -->
        <!--        </button> -->
      </div>
      <div id="navbar-cta" class="hidden w-full items-center justify-between md:order-1 md:w-auto md:flex">
        <ul class="mt-4 flex flex-col border border-gray-100 rounded-lg bg-gray-50 p-4 font-medium md:mt-0 md:flex-row md:border-0 dark:border-gray-700 dark:bg-gray-800 md:bg-white md:p-0 md:space-x-8 rtl:space-x-reverse md:dark:bg-gray-900">
          <li v-for="item in navList" :key="item.id">
            <div class="block cursor-pointer rounded text-lg px-3 py-2 text-gray-900 dark:border-gray-700 hover:bg-gray-100 md:p-0 dark:text-white dark:hover:bg-gray-700 md:hover:bg-transparent dark:hover:text-white md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-blue-500">
              <span v-if="!item.children" @click="handleNavClick(item.href)">
                {{ item.name }}
              </span>
              <span
                v-else
                id="dropdownNavbar"
                data-dropdown-toggle="dropdownNavbar" class="w-full flex items-center justify-between rounded px-3 py-2 text-gray-900 md:w-auto md:border-0 dark:border-gray-700 hover:bg-gray-100 md:p-0 dark:text-white dark:hover:bg-gray-700 md:hover:bg-transparent dark:focus:text-white md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-blue-500" @click="handleToggleDropdown(item)"
              >
                {{ item.name }} <svg class="ms-2.5 h-2.5 w-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
                </svg>
              </span>
              <!-- Dropdown menu -->
              <div
                class="top-15 z-99 w-62 rounded-lg bg-white font-normal shadow divide-y divide-gray-100 dark:bg-gray-700 dark:divide-gray-600"
                :class="item.open ? 'fixed' : 'hidden'"
              >
                <ul class="py-2 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton">
                  <li v-for="child in item.children" :key="child.id" @click="handleProductClick(child.id)">
                    <span class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">{{ child.name }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<style scoped lang="scss">

</style>
